<template>
    <Modal v-model="setModalStatus" class="pages-home-homeIndex-forgetPwdModal" :mask-closable="false"
           @on-cancel="cancelModalBtn" class-name="vertical-center-modal">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="information-circled"></Icon>
            <span>通过手机号找回密码</span>
        </p>
        <div>
            <Form :model="formValidate"   label-position="left" :label-width="100">
                <template v-if="!isVerified">

                    <Form-item label="手机号码：" style="margin-bottom: 0">
                        <Row>
                            <Col span="22">
                            <Input v-model="formValidate.mobile" placeholder="手机号码" :maxlength="11" >
                            </Input>
                            </Col>
                        </Row>
                    </Form-item>

                    <Form-item label="短信验证码："  style="margin-bottom: 0">
                        <Row>
                            <Col span="15">
                            <Input v-model="formValidate.code" placeholder="请输入验证码">
                            </Input>
                            </Col>
                            <Col span="8">
                            <button type="button" class="btn btn-primary" @click="requestBindPhone" style="margin-left: 25px">获取验证码</button>
                            </Col>
                        </Row>
                    </Form-item>

                </template>

                <template v-else>

                    <Form-item label="输入新密码：" style="margin-bottom: 0">
                        <Row>
                            <Col span="22">
                            <Input type="password" v-model="formValidate.newPWD" placeholder="输入新密码">
                            </Input>
                            </Col>
                        </Row>
                    </Form-item>

                </template>
            </Form>
        </div>
        <div slot="footer">
            <button class="btn btn-primary" @click="handleCommit">确认提交</button>
        </div>
    </Modal>
</template>

<script type="text/ecmascript-6">

    import getData from '../../../api/getData'

    export default {
        props: ['modal-status'],
        data: function () {
            return {
                isVerified: false,
                formValidate: {
                    mobile: '',
                    code: '',
                    newPWD: ''
                }
            }
        },
        computed: {
            setModalStatus(){
                return this.modalStatus;
            }
        },
        methods: {

            cancelModalBtn: function () {
                this.isVerified = false;
                this.formValidate = {
                    mobile: '',
                    code: '',
                    newPWD: ''
                };
                this.$emit("close-modal");
            },

            //发送一个请求，获取验证码
            requestBindPhone:function(){
                var self = this;
                getData.post("requestBindPhone", {phone : self.formValidate.mobile} ).then(function (response) {
                    if( response.data.code != 0 ){
                        self.$Message.info( response.data.msg ? response.data.msg : '网络错误，请稍后重试' );
                    }
                }).catch(function (response) {
                    self.$Message.info('网络错误，请联系客服');
                });
            },

            handleCommit: function(){
                if(this.isVerified){
                    this.updatePWDByMobile();
                }else{
                    this.verifySMSCode();
                }
            },

            //验证码手机短信，并进行绑定操作；action参数：手机初次绑定操作：BindPhone；手机短信权限验证：CheckSMS； 解绑：ChangePhone
            verifySMSCode: function(){
                var self = this;
                getData.post("verifySMSCode", {
                    phone: self.formValidate.mobile,
                    code: self.formValidate.code,
                    action: 'CheckSMS'
                }).then(function (response) {
                    if( response.data.code == 0 ){
                        self.isVerified = true;
                    }else{
                        self.$Message.info( response.data.msg ? response.data.msg : '网络错误，请稍后重试' );
                    }

                }).catch(function (response) {
                    self.$Message.info('网络错误，请联系客服');
                });
            },

            //短信权限验证通过接口，直接传递新密码，不需要原密码验证
            updatePWDByMobile: function(){
                var self = this;
                getData.post("updatePWDByMobile", {
                    NewPWD: self.formValidate.newPWD
                }).then(function (response) {
                    if( response.data.code == 0 ){
                        self.$Message.info( '修改密码成功' );
                        self.cancelModalBtn();
                    }else{
                        self.$Message.info( response.data.msg ? response.data.msg : '修改密码失败，请重试' );
                    }
                }).catch(function (response) {
                    self.$Message.info('网络错误，请联系客服');
                });
            }

        },
        components: {}
    }
</script>

<style scoped lang="scss">
    .pages-home-homeIndex-forgetPwdModal {
    }
</style>
